<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
  {% block title %}{% endblock %}
  <link rel="stylesheet" href="/css/pc/reset.css">
  <link rel="stylesheet" href="/css/pe/layout.css">
  <link rel="stylesheet" href="/font/iconfont.css">
</head>

<body>
  <header class="header">
    <i class="iconfont iconmore">
    </i>
    <h1>
      <a href="/" class="title">
        大雄博客
      </a>
    </h1>
  </header>
  <!-- 返回顶部的小火箭 -->
  <div class="back-to-top">
    <i class="iconfont iconhuojian"></i>
  </div>
  {% block content %} {% endblock %}
</body>
<script src="/js/jquery.js"></script>
<script src="/js/fontsizeset.js"></script>
<script>
  function showBackToTop() {
    let topRange = document.documentElement.scrollTop
    if (topRange == 0) {
      $('.back-to-top').animate({ bottom: '-100px' }, 50)
    }
    if (topRange > 100) {
      $('.back-to-top').animate({ bottom: '100px' }, 200)
    }
  }
  // 点击回到顶部
  $('.back-to-top').click(function () {
    $('html,body').animate({ scrollTop: '0px' }, 500)
  })
  //防抖debounce代码：
  function debounce(fn, delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
      // 每当用户输入的时候把前一个 setTimeout clear 掉
      clearTimeout(timeout);
      // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
      timeout = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    };
  }
  //滚动事件
  window.addEventListener('scroll', debounce(showBackToTop, 200));
</script>
{% block jscontent %} {% endblock %}

</html>